<template>
  <div class="content">
    <van-sticky>
      <van-nav-bar class="kkk" :title="operationdata.title" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="operation">
      <h2>{{ operationdata.cases }}</h2>
      <p>
        <span>类型</span>：<span>{{ operationdata.type }}</span>
      </p>
    </div>
    <div class="tab">
      <van-tabs v-model="active">
        <van-tab title="概括">
          <div class="Disease">
            <h3>疾病介绍</h3>
            <span>{{ operationdata.title }}</span>
          </div>
          <div class="Medical">
            <h3>就诊指南</h3>
            <p><span>挂号科室</span>：{{ operationdata.type }}</p>
            <p><span>是否传染</span>：否</p>
            <p><span>是否遗传</span>：否</p>
          </div>
          <div class="shop">
            <p class="shop-top">
              <span>商品推荐</span><b>|</b><img src="../../img/medicine.gif" alt="" /><span
                >圆心药房</span
              >
            </p>
            <div class="shop-content" v-for="(item, index) in tabdata" :key="index">
              <div class="left">
                <img :src="item.image" alt="" />
              </div>
              <div class="right">
                <p class="title">{{ item.title }}</p>
                <p class="title-nei">{{ item.subtitle }}</p>
                <p class="title-price">
                  <span class="price">￥{{ item.price }}</span>
                  <span><button @click="shop">立即咨询</button></span>
                </p>
              </div>
            </div>
          </div>
          <div class="recommend">
            <div class="internal" v-for="(item, index) in listData" :key="index">
              <div class="listTop">
                <div class="doctor">
                  <div class="list-img">
                    <img :src="item.avatar" alt="" />
                  </div>
                  <div class="list-con">
                    <p class="list-name">{{ item.name }}</p>
                    <p class="list-doctor">{{ item.position }}&emsp;{{ item.browse }}人看过</p>
                  </div>
                </div>
                <div class="btn">
                  <button @click="socket">极速提问</button>
                </div>
              </div>
              <div class="listButton">
                <p>
                  <span>{{ item.type }}</span
                  ><span>{{ item.title }}</span>
                </p>
                <p>{{ item.content[0].word }}</p>
              </div>
            </div>
          </div>
          <div class="kkk"></div>
        </van-tab>
        <van-tab title="视频">
          <div class="shi">
            <div class="video" v-for="(item, index) in videoData" :key="index">
              <div class="left">
                <div>
                  <p class="video-title">
                    <span>视频</span> <span>{{ item.title }}</span>
                  </p>
                  <p class="video-date">
                    <span>{{ item.date[0] }}</span
                    >&emsp;<span>{{ item.date[1] }}</span>
                  </p>
                </div>
              </div>
              <div class="right">
                <video controls :src="item.video"></video>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="音频">
          <div class="audio">
            <div class="audio-list" v-for="(item, index) in listData" :key="index">
              <div class="audio-title">
                <span>音频</span>
                <span>{{ item.title }}</span>
              </div>
              <div class="audio-audio">
                <div>
                  <img :src="item.avatar" alt="" />
                </div>
                <div>
                  <audio
                    src="https://www.zapsplat.com/wp-content/uploads/2021/sound-effects-1698768929.mp3"
                    controls
                  ></audio>
                </div>
              </div>
              <div class="audio-name">
                <p>
                  <span>{{ item.name }}</span
                  ><b>|</b><span>{{ item.position }}</span> &emsp;<span>{{ item.department }}</span>
                </p>
                <p>{{ item.browse }}播放次</p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="问答">
          <div class="recommend2">
            <div class="internal2" v-for="(item, index) in listData" :key="index">
              <div class="listButton2">
                <p>
                  <span>{{ item.type }}</span
                  ><span>{{ item.title }}</span>
                </p>
                <p>{{ item.content[0].word }}</p>
              </div>
              <div class="listButton3">
                <p>
                  <img :src="item.avatar" alt="" />
                </p>
                <p>
                  <span>{{ item.name }}</span>
                  <b>|</b>
                  <span>{{ item.position }}</span>
                </p>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab title="文章">
          <div class="article">
            <div class="article-list" v-for="(item, index) in listData" :key="index">
              <div class="article-top">
                <p class="article-p1">
                  <span>文章</span><span>{{ item.title }}</span>
                </p>
                <div class="article-p2">
                  <van-text-ellipsis rows="2" :content="item.content[0].word"></van-text-ellipsis>
                </div>
              </div>

              <div class="article-bottom">
                <p>
                  <img :src="item.avatar" alt="" />
                </p>
                <p>
                  <span class="article-name">{{ item.name }}</span>
                  <b>|</b>
                  <span>{{ item.position }}</span>
                  <span>济南市第二人民医院</span>
                </p>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
//返回上一级
import http from '@/utils/http'
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
const patien = JSON.parse(JSON.stringify(route.query))
console.log(patien)
const active = ref(0)
const operationdata = ref([])
const tabdata = ref([])

const listData = ref([])
const videoData = ref([])

const getReviewList = async () => {
  await http.get('/api/DownDoctorList').then((res) => {
    listData.value = res.data.data
  })
}
getReviewList()

const getvideolist = async () => {
  await http.get('/api/live').then((res) => {
    videoData.value = res.data.data
    console.log('====================================')
    console.log(videoData.value)
    console.log('====================================')
  })
}
getvideolist()

const PatientDetail = () => {
  return http
    .get(`api/case?id=${patien.id}`)
    .then((res) => {
      operationdata.value = res.data.data
      console.log(operationdata)
    })
    .catch((error) => {
      console.log('获取患者详细数据失败', error)
    })
}
PatientDetail()
//跳商城
const shop=()=>{
  router.push('/shop')   
}
const onClickLeft = () => history.back()
http
  .get('/api/medicine')
  .then((res) => {
    tabdata.value = res.data.data
    console.log(tabdata.value)
  })
  .catch((err) => {
    console.log(err)
  })
const socket = () => {
  router.push('/socket2')
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  .operation {
    width: 100%;
    height: 300px;
    padding: 80px 40px;
    background: #edf3ff;
    h2 {
      font-size: 50px;
      font-weight: 600;
      color: #0d7ce8;
    }
    p {
      line-height: 90px;
      color: #696c75;
    }
  }
  .tab {
    width: 100%;
    height: 100%;
    padding: 30px;
    .Disease {
      width: 100%;
      height: 400px;

      h3 {
        line-height: 100px;
        font-size: 40px;
      }
      p {
        line-height: 60px;
        font-size: 30px;
        color: #292929;
      }
    }
    .Medical {
      width: 100%;
      height: 300px;
      h3 {
        line-height: 100px;
        font-size: 40px;
      }
      p {
        line-height: 60px;
        font-size: 30px;
        color: #292929;
        span {
          font-weight: 600;
        }
      }
    }
    .shop {
      width: 100%;
      height: 990px;
      border-bottom: 10px solid #f8f8f8;
      overflow: hidden;
      .shop-top {
        width: 100%;
        height: 80px;
        :nth-child(1) {
          font-size: 30px;
          font-weight: 600;
          margin-right: 30px;
        }
        b {
          color: #ccc;
        }
        img {
          width: 50px;
          height: 50px;
          margin-left: 10px;
        }
        :nth-last-child(1) {
          font-size: 25px;
          font-weight: 600;
          margin-right: 20px;
          color: #43ae9e;
        }
      }
      .shop-content {
        width: 100%;
        height: 300px;
        display: flex;
        .left {
          width: 40%;
          height: 300px;
          img {
            width: 260px;
            height: 300px;
          }
        }
        .right {
          width: 60%;
          height: 300px;
          padding-top: 40px;
          .title {
            font-size: 30px;
            font-weight: 600;
            width: 100%;
            height: 80px;
            line-height: 80px;
          }
          .title-nei {
            font-size: 25px;
            color: #9a9899;
            width: 100%;
            height: 50px;
            line-height: 50px;
          }
          .title-price {
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 100px;
            align-items: center;

            .price {
              font-size: 30px;
              color: red;
              font-weight: 600;
            }
            button {
              width: 150px;
              padding: 10px;
              border: 0;
              border-radius: 10px;
              background: #1e6ffe;
              color: #fff;
            }
          }
        }
      }
    }
    .recommend {
      margin-top: 40px;
      width: 100%;
      .internal {
        width: 100%;
        height: 500px;
        margin: 20px 0;
        border-bottom: 2px solid #f8f8f8;
        .listTop {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100px;
          .doctor {
            width: 500px;
            display: flex;
            align-items: center;
            .list-img {
              width: 80px;
              height: 80px;
              margin-right: 30px;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .list-con {
              width: 300px;
              height: 100px;
              .list-name {
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 30px;
              }
              .list-doctor {
                width: 100%;
                height: 50px;
                line-height: 50px;
                font-size: 20px;
                color: #ccc;
              }
            }
          }
          .btn {
            display: flex;
            button {
              width: 150px;
              padding: 10px;
              border: 0;
              border-radius: 10px;
              background: #1e6ffe;
              color: #fff;
            }
          }
        }
        .listButton {
          width: 100%;
          height: 400px;
          :nth-child(1) {
            width: 100%;
            height: 100px;
            line-height: 100px;
            :nth-child(1) {
              background: pink;
              color: #fff;
              border-radius: 10px;
              padding: 6px 10px;
              margin-right: 20px;
            }
            :nth-child(2) {
              font-size: 30px;
              font-weight: 600;
            }
          }
          :nth-child(2) {
            width: 100%;
            height: 300px;
            font-size: 25px;
            color: #48484a;
            line-height: 50px;
          }
        }
      }
    }
    .shi {
      width: 100%;
      height: 100%;
      .video {
        width: 100%;
        height: 200px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 2px solid #efefef;
        .left {
          width: 300px;
          height: 200px;
          .video-title {
            width: 100%;
            height: 100px;
            line-height: 50px;
            :nth-child(1) {
              background: #a6a7fa;
              color: #fff;
              border-radius: 10px;
              padding: 6px 10px;
              margin-right: 20px;
            }
            :nth-child(2) {
              font-size: 30px;
              font-weight: 600;
            }
          }
          .video-date {
            width: 100%;
            height: 100px;
            line-height: 100px;
            color: #ccc;
          }
        }
        .right {
          width: 300px;
          height: 200px;
          display: flex;
          video {
            width: 280px;
            height: 180px;
          }
        }
      }
    }
    .audio {
      width: 100%;
      height: 100%;
      .audio-list {
        width: 100%;
        height: 310px;
        border-radius: 20px;
        padding: 20px;
        .audio-title {
          width: 100%;
          height: 100px;
          line-height: 100px;
          :nth-child(1) {
            background: #84d5ea;
            color: #fff;
            border-radius: 10px;
            padding: 6px 10px;
            margin-right: 20px;
          }
          :nth-child(2) {
            font-size: 30px;
            font-weight: 600;
          }
        }
        .audio-audio {
          display: flex;
          width: 100%;
          height: 100px;
          line-height: 100px;
          border-bottom: 2px solid #efefef;
        }
        .audio-name {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100px;
          line-height: 100px;
          :nth-child(1) {
            span {
              margin: 0 10px;
              color: #545454;
            }
          }
          :nth-child(1) {
            span {
              color: #545454;
            }
          }
        }
      }
    }
    .recommend2 {
      width: 100%;
      height: 100%;
      .internal2 {
        width: 100%;
        height: 500px;
        margin: 20px 0;
        border-bottom: 2px solid #f8f8f8;

        .listButton2 {
          width: 100%;
          height: 400px;
          :nth-child(1) {
            width: 100%;
            height: 100px;
            line-height: 100px;
            border-bottom: 2px solid #efefef;
            :nth-child(1) {
              background: pink;
              color: #fff;
              border-radius: 10px;
              padding: 6px 10px;
              margin-right: 20px;
            }
            :nth-child(2) {
              font-size: 30px;
              font-weight: 600;
            }
          }
          :nth-child(2) {
            margin-top: 20px;
            width: 100%;
            height: 300px;
            font-size: 25px;
            color: #48484a;
            line-height: 50px;
          }
        }
        .listButton3 {
          width: 100%;
          height: 100px;
          display: flex;
          align-items: center;
          :nth-last-child(1) {
            line-height: 60px;
            span {
              margin: 10px;
            }
            b {
              color: #ccc;
            }
            :nth-child(1) {
              font-size: 30px;
              color: #505050;
            }
            :nth-last-child(1) {
              color: #9b9b9b;
            }
          }
        }
      }
    }
    .article {
      width: 100%;
      height: 100%;
      .article-list {
        width: 100%;
        height: 350px;
        .article-top {
          width: 100%;
          height: 250px;
          border-bottom:2px solid #efefef;
          .article-p1 {
            width: 100%;
            height: 100px;
            line-height: 100px;
            :nth-child(1) {
              background: #84d5ea;
              color: #fff;
              border-radius: 10px;
              padding: 6px 10px;
              margin-right: 20px;
            }
            :nth-child(2) {
              font-size: 30px;
              font-weight: 600;
            }
          }
          .article-p2{
             width: 100% ;
             height: 100px;
             line-height: 100px;
          }
        }
        .article-bottom{
           width: 100%;
           height: 100px;
           display: flex;
           align-items: center;
           span{
             margin: 10px;
            color:#9f9f9f;
           }
           b{
            color: #ccc;
           }
           .article-name{
              font-size: 30px;
              margin-left: 10px;
              color: #5e5e5e;
           }
        }
      }
    }
  }
}
</style>